<template>
  <div>
    <el-card class="box-card">
      <el-row>
        <el-col :span="18">
          <div class="grid-content bg-purple el-icon-zoom-in"> 删选搜索</div>
        </el-col>
        <el-col :span="6">
          <el-button @click="reSet">重置</el-button>
          <el-button type="primary"
                     :disabled="!input_value"
                     @click="goSearch">查询搜索</el-button>
        </el-col>
      </el-row>
      <el-row>
        <el-col class="main_left"
                :span="6">
          <el-form ref="form"
                   label-width="80px">
            <el-form-item label="输入搜索">
              <el-select size="mini"
                         v-model="key_search"
                         style="width:100px"
                         placeholder="--关键字--">
                <el-option label="序号ID"
                           value="id">
                </el-option>
                <el-option label="用户职位"
                           value="userCapacity">
                </el-option>
                <el-option label="用户昵称"
                           value="userName">
                </el-option>
                <el-option label="更新时间"
                           value="userTime">
                </el-option>
              </el-select>
              <el-input placeholder="账号/姓名"
                        :disabled="key_search?false:true"
                        v-model="input_value"></el-input>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
    </el-card>
    <el-card class="box-card">
      <el-row>
        <el-col :span="22">
          <div class="el-icon-s-order">数据搜索</div>
        </el-col>
        <el-col :span="2">
          <el-button @click="addUser">添加</el-button>
        </el-col>
      </el-row>
    </el-card>
    <el-card class="box-card">
      <el-table border
                :data="userInfo"
                style="width: 100%">
        <el-table-column prop="id"
                         align="center"
                         label="序号"
                         width="80">
        </el-table-column>
        <el-table-column prop="userCapacity"
                         align="center"
                         label="用户职位"
                         width="180">
        </el-table-column>
        <el-table-column prop="userName"
                         align="center"
                         label="用户昵称"
                         width="180">
        </el-table-column>
        <el-table-column prop="jurisdiction"
                         align="center"
                         label="权限列表"
                         width="180">
        </el-table-column>
        <el-table-column label="图片头像"
                         align="center"
                         width="180">
          <template slot-scope="{row,index}">
            <img :src="row.userImage"
                 alt=""
                 width="50px">
          </template>
        </el-table-column>
        <el-table-column prop="userTime"
                         align="center"
                         label="更新时间">
        </el-table-column>
        <el-table-column prop="address"
                         align="center"
                         label="操作">
          <template slot-scope="{row}">
            <el-button type="warning"
                       icon="el-icon-edit"
                       size="mini"
                       @click="revampName(row)"></el-button>
            <el-popconfirm title="这是一段内容确定删除吗？"
                           @onConfirm="handlerDele(row)">
              <el-button type="danger"
                         slot="reference"
                         icon="el-icon-delete"
                         size="mini"></el-button>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination style="textAlign:center"
                     @size-change="handleSizeChange"
                     @current-change="handleCurrentChange"
                     :current-page="page"
                     :page-sizes="[5,10,15,20]"
                     :page-size="limit"
                     layout=" prev, pager, next, jumper, -> ,sizes, total"
                     :total="total">
      </el-pagination>
    </el-card>
    <el-dialog :title="title"
               width="550px"
               :visible.sync="dialogFormVisible">
      <el-form label-position="left"
               label-width="180px">
        <el-form-item label="用户职位">
          <el-input autocomplete="off"
                    v-model="addUserInfo.userCapacity"></el-input>
        </el-form-item>
        <el-form-item label="用户昵称">
          <el-input autocomplete="off"
                    v-model="addUserInfo.userName"></el-input>
        </el-form-item>
        <el-form-item label="权限选择">
          <el-select v-model="addUserInfo.jurisdiction"
                     placeholder="请选择">
            <el-option :label="item"
                       v-for="(item,index) in userLimit"
                       :key="index"
                       :value="item"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="用户头像">
          <el-upload class="avatar-uploader"
                     action="/dev-api/admin/product/fileUpload"
                     :on-success="handleAvatarSuccess"
                     :show-file-list="false">
            <img v-if="addUserInfo.userImage"
                 :src="addUserInfo.userImage"
                 width="80px"
                 class="avatar">
            <i v-else
               class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="序号">
          <el-input :value="addUserInfo.id"
                    v-model="addUserInfo.id"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer"
           class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary"
                   @click="handlerUserItem">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters } from "vuex"
export default {
  name: "userList",
  data () {
    return {
      input_value: "", //搜索框动态搜集
      key_search: "",  //关键字选择
      dialogVisible: false,
      dialogFormVisible: false,
      //分页器
      limit: 10,
      page: 1,
      total: 0,
      //添加及修改页面
      title: "",
      test: "测试账号",
      userLimit: ["部分请求", "无权限", "全部权限"],
      addUserInfo: {
        id: "",
        jurisdiction: "",//搜集用户权限
        userCapacity: "",
        userName: "",
        userImage: "",
        userTime: ""
      }
    }
  },
  mounted () {
    //初始化数据
    this.userList()
  },
  computed: {
    ...mapGetters(["userInfo"])
  },
  methods: {
    //重置
    reSet () {
      this.input_value = "",
        this.userList()
    },
    //修改用户名发送请求
    async handlerUserItem () {
      let result;
      if (this.row_id) {
        //修改时的请求
        result = await this.$API.getChangeUserInfo(this.row_id, this.addUserInfo)
        if (result.data.code == 200) {
          this.$message({
            message: '恭喜你，修改成功',
            type: 'success'
          });
        } else {
          this.$message.error('修改失败');

        }
      } else {
        //添加时的请求
        if (this.addUserInfo.id && this.addUserInfo.userName) {
          result = await this.$API.postAddUserInfo(this.addUserInfo)
          if (result.data.code == 200) {
            this.$message({
              message: '恭喜你，修改成功',
              type: 'success'
            });
          } else {
            this.$message.error('修改失败');

          }
        } else {
          this.$message.error('序号和昵称是必须的哦!');
          return;
        }
      }
      if (result.data.code == 200) {
        this.dialogFormVisible = false
        //更新数据
        this.userList()
      } else {
        // alert(result)
      }
    },
    //修改用户名
    revampName (row) {
      this.row_id = row._id
      this.title = "修改页面"
      this.dialogFormVisible = true
      Object.assign(this.addUserInfo, row)
    },
    //删除元素
    async handlerDele (row) {
      let result = await this.$API.getDeleUserInfo(row._id)
      if (result.data.code == 200) {
        this.userList()
        this.$message({
          message: '恭喜你，删除成功',
          type: 'success'
        });
      } else {
        this.$message.error('删除失败');
      }
    },
    //分页器分页
    handleSizeChange (limit) {
      this.limit = limit
      this.userList()
    },
    handleCurrentChange (page) {
      this.page = page
      this.userList()
    },
    //添加用户信息
    addUser () {
      //将修改标志清空
      this.row_id = ""
      this.dialogFormVisible = true
      this.title = "添加test属性"
      this.addUserInfo = {
        userCapacity: "",
        userName: "",
        userLimit: ["首页", "品牌操作", "商品管理"],
        userImage: "",
        userTime: "",
        jurisdiction: ""
      }

    },
    //搜索
    async goSearch () {
      const { input_value, key_search } = this
      if (!input_value && !key_search) {
        return;
      }
      await this.$store.dispatch("getFindUser", { key_search, input_value })
    },
    //请求用户信息
    async userList () {
      const { limit, page } = this
      let resulu = await this.$store.dispatch("getUserList", { limit, page })
      this.total = resulu.total
    },


    //照片墙上传地址
    handleAvatarSuccess (file) {
      this.addUserInfo.userImage = file.data
      this.dialogVisible = true;
    }
  }
}
</script>

<style scoped>
.box-card {
  margin-bottom: 15px;
}
.main_left {
  margin-left: 50px;
}
.el-row {
  margin-bottom: 20px;
}
.el-col {
  border-radius: 4px;
}

.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
</style>